<template>
<div>
<div class="swipers" style="height:212px">
  <van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in images" :key="index">
    <img v-lazy="image" style="width:100%;height:212px" />
  </van-swipe-item>
</van-swipe>
</div>
<div class="sousuo">
<span @click="tiao">{{cityname}}</span><van-icon name="arrow-down" />&nbsp;&nbsp;&nbsp;|

<span class="ziti">
  <van-icon name="search" />请输入小区或地址</span>
</div>
  <!-- <baidu-map class="bm-view"> -->
  <!-- </baidu-map> -->
<van-icon name="thumb-circle-o" class="aaaa" @click="map" />
<van-grid :column-num="4" class="icon">
  <van-grid-item icon="wap-home-o" text="整租" />
  <van-grid-item icon="friends-o" text="合租" />
  <van-grid-item icon="gem-o" text="地图找房" to="/map"/>
  <van-grid-item icon="shop-collect-o" text="去出租" to="/gochuzu" />
</van-grid>
<van-cell-group>
  <van-cell title="租房小组" value="更多" />
</van-cell-group>

<van-grid direction="horizontal" :column-num="2">
  <van-grid-item icon="photo-o" text="家住回龙观归属的感觉" />
  <van-grid-item icon="photo-o" text="宜居四五环大都市生活" />
  <van-grid-item icon="photo-o" text="喧嚣三里屯繁华的背后" />
  <van-grid-item icon="photo-o" text="比邻十号线地铁心连心" />

</van-grid>
</div>
</template>

<script>
// import { login } from '@/api/user'
export default {
  data () {
    return {
      cityname: '上海',
      images: [
        'http://liufusong.top:8080/img/swiper/1.png',
        ' http://liufusong.top:8080/img/swiper/2.png',
        ' http://liufusong.top:8080/img/swiper/3.png'
      ]
    }
  },
  created () {
    this.cityname = localStorage.getItem('cityname')
  },
  methods: {
    tiao () {
      this.$router.push('/citylist')
    },
    map () {
      this.$router.push('/map')
    }

  }
}
</script>

<style lang="less" scoped>
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .sousuo{
    position: fixed;
    top: 15px;
    left: 20px;
   width: 310px;
   margin-right: 50px;
   height: 30px;
   background-color: #fff;
   line-height: 30px;
  }
  .sousuo span{
    font-size: 14px;
  }
  .icon{
    color:rgb(4, 175, 104);
    font-size: 50px;
  }
  .ziti{
    font-size: 14px;
    color:rgb(156, 159, 161);
    text-align: center;
    line-height: 14px;
    margin-right: 50px;
    }
    .aaaa{
      position: fixed;
      top: 20px;
      right: 10px;
      font-size: 25px;
    }
</style>
